<template>
  <div class="result" style="width: 100%">
    <Home />
    <div class="result-container">
      <div class="title-wrap" style="margin-left:32%">
        <!-- 标题 -->
        <h2 class="title">{{ $route.query.q }}</h2>
        <span class="sub-title">找到 {{ count }} 个结果</span>
      </div>
      <el-tabs
        v-model="activeIndex"
        type="card"
        style="width:800px;  background-color: rgb(247,247,247);"
      >
        <el-tab-pane label="单曲" name="songs" style="line-height: 30px">
          <table class="el-table">
            <thead>
              <th></th>
              <th>音乐标题</th>
              <th>歌手</th>
              <th>专辑</th>
              <th>时长</th>
            </thead>
            <tbody>
              <tr
                v-for="(item, index) in songList"
                :key="index"
                class="el-table__row"
                @dblclick="playMusic(item.id)"
              >
                <th :class="{ activee: index % 2 == 0 }">
                  <i class="el-icon-video-play"></i>
                </th>
                <th>
                  <div class="song-wrap">
                    <div class="name-wrap">
                      <!-- 歌名 -->
                      <a href=""
                        ><span @click="toLyric(item.id)">{{ item.name }}</span></a
                      >
                      <!-- mv的图标 -->
                      <span
                        v-if="item.mvid != 0"
                        class="iconfont icon-mv"
                      ></span>
                    </div>
                    <!-- 二级标题 -->
                    <span v-if="item.alias.length != 0">{{
                      item.alias[0]
                    }}</span>
                  </div>
                </th>
                <th @click="toArtist(item.artists[0].id)">{{ item.artists[0].name }}</th>
                <th>{{ item.album.name }}</th>
                <th>{{ item.duration }}</th>
              </tr>
            </tbody>
          </table>
          <Bofang></Bofang>
          <!-- //播放 -->
          <div class="player">
            <!-- autoplay 自动播放 -->
            -->
            <audio
              :src="musicUrl"
              controls
              autoplay
              class="player_audio"
            ></audio>
          </div>
        </el-tab-pane>
        <el-tab-pane label="歌手" name="artists"></el-tab-pane>
        <el-tab-pane label="专辑" name="cd"></el-tab-pane>

        <el-tab-pane label="视频" name="mv">
          <div class="items mv">
            <div
              v-for="(item, index) in mv"
              :key="index"
              class="item"
              @click="toMV(item.id)"
            >
              <div class="img-wrap">
                <!-- 封面 -->
                <img :src="item.cover" alt="" />
                <span class="iconfont icon-play"></span>
                <div class="num-wrap">
                  <div class="iconfont icon-play"></div>
                  <!-- 播放次数 -->
                  <div class="num">{{ item.playCount }}</div>
                </div>
                <!-- 持续时间 -->
                <span class="time">{{ item.duration }}</span>
              </div>
              <div class="info-wrap">
                <!-- mv名 -->
                <div class="name">{{ item.name }}</div>
                <!-- 歌手名 -->
                <div class="singer"   >{{ item.artistName }}</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="歌词" name="words"></el-tab-pane>
        <el-tab-pane label="歌单" name="lists">
          <div class="items">
            <div
              v-for="(item, index) in playlists"
              :key="index"
              class="item"
              @click="toPlaylist(item.id)"
            >
              <div class="img-wrap">
                <div class="num-wrap">
                  播放量:
                  <span class="num">{{ item.playCount }}</span>
                </div>
                <img :src="item.coverImgUrl" alt="" />
                <span class="iconfont icon-play"></span>
              </div>
              <p class="name">{{ item.name }}</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="声音主播" name="dj"></el-tab-pane>
        <el-tab-pane label="用户" name="user"></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
// 导入 aixos
import Bofang from "@/components/common/bofang.vue";
import axios from "axios";
import Home from "@/components/content/Home/Home.vue";
export default {
  name: "result",
  components: {
    Home,
    Bofang,
  },
  data() {
    return {
      // tab切换时 会改变的数据
      activeIndex: "songs",
      // 保存 查询歌曲
      songList: [],
      // 保存歌单的字段
      playlists: [],
      // 保存mv的字段
      mv: [],
      // 搜索结果的总数
      count: 0,
      musicUrl: "",
    };
  },
  // 生命周期钩子 回调函数
  created() {
    axios({
      url: "http://localhost:3000/search",
      method: "get",
      params: {
        keywords: this.$route.query.q,
        type: 1,
        // 获取的数据量
        limit: 10,
      },
    }).then((res) => {
      console.log(res);
      this.songList = res.data.result.songs;
      // 计算歌曲时间

      for (let i = 0; i < this.songList.length; i++) {
        let min = parseInt(this.songList[i].duration / 1000 / 60);
        let sec = parseInt((this.songList[i].duration / 1000) % 60);
        if (min < 10) {
          min = "0" + min;
        }
        if (sec < 10) {
          sec = "0" + sec;
        }
        // console.log(min + '|' + sec)
        this.songList[i].duration = min + ":" + sec;
      }
      // 保存总数
      this.count = res.data.result.songCount;
    });
  },
  //方法
  methods: {
    // playMusic(id) {
    //   axios({
    //     url: "http://localhost:3000/song/url",
    //     method: "get",
    //     params: {
    //       id, // id:id
    //     },
    //   }).then((res) => {
    //     // console.log(res)
    //     let url = res.data.data[0].url;
    //     //  console.log(this.$parent.musicUrl)
    //     // 设置给父组件的 播放地址
    //     this.musicUrl = url;
    //   });
    // },
    // 去mv详情页
    toMV(id) {
      this.$router.push(`/mv?q=${id}`);
    },
    // 去歌单详情页
    toPlaylist(id) {
      // 跳转并携带数据即可
      this.$router.push(`/playlist?q=${id}`);
    },
  },
  // 侦听器
  watch: {
    activeIndex() {
      // songs 歌曲
      // lists 歌单
      // mv    mv
      let type = 1;

      // 获取个数
      let limit = 10;
      switch (this.activeIndex) {
        case "songs":
          type = 1;
          limit = 10;
          break;
        case "lists":
          type = 1000;
          limit = 10;
          break;
        case "mv":
          type = 1004;
          limit = 8;
          break;

        default:
          break;
      }

      axios({
        url: "http://localhost:3000/search",
        method: "get",
        params: {
          keywords: this.$route.query.q,
          type, // type:type,
          // 获取的数据量
          limit, // limit: limit
        },
      }).then((res) => {
        console.log(res);
        // 获取歌曲
        if (type == 1) {
          // 歌曲
          this.songList = res.data.result.songs;
          // 计算歌曲时间
          for (let i = 0; i < this.songList.length; i++) {
            let min = parseInt(this.songList[i].duration / 1000 / 60);
            let sec = parseInt((this.songList[i].duration / 1000) % 60);
            if (min < 10) {
              min = "0" + min;
            }
            if (sec < 10) {
              sec = "0" + sec;
            }
            // console.log(min + '|' + sec)
            this.songList[i].duration = min + ":" + sec;
          }
          // 保存总数
          this.count = res.data.result.songCount;
        }
        // 获取 歌单
        else if (type == 1000) {
          // 歌单的逻辑
          this.playlists = res.data.result.playlists;
          // 总数
          this.count = res.data.result.playlistCount;
          // 处理 播放次数
          for (let i = 0; i < this.playlists.length; i++) {
            if (this.playlists[i].playCount > 100000) {
              this.playlists[i].playCount =
                parseInt(this.playlists[i].playCount / 10000) + "万";
            }
          }
        } else {
          // 保存mv数据
          this.mv = res.data.result.mvs;
          // 总数
          this.count = res.data.result.mvCount;
          // 处理数据
          for (let i = 0; i < this.mv.length; i++) {
            // 时间
            let min = parseInt(this.mv[i].duration / 1000 / 60);
            let sec = parseInt((this.mv[i].duration / 1000) % 60);
            if (min < 10) {
              min = "0" + min;
            }
            if (sec < 10) {
              sec = "0" + sec;
            }
            this.mv[i].duration = min + ":" + sec;

            // 播放次数
            if (this.mv[i].playCount > 100000) {
              this.mv[i].playCount =
                parseInt(this.mv[i].playCount / 10000) + "万";
            }
          }
        }
      });
    },
  },
};
</script>

<style>
.result {
  background-color: rgb(245, 245, 245);
}
.result-container {
  width: 880px;
  height: 1516px;
  padding: 40px;
  border: 1px solid;
  margin: 0 auto;
  margin-right: 27%;
  background-color: rgb(255, 255, 255);
}

.el-table__row {
  width: 500px;
}
th {
  border-bottom: solid 1px;
}
.activee {
  background-color: pink;
}
/* .player {
  background: rgb(36, 36, 36);
  height: 60px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.player_audio {
  margin-left:20%;
  width: 50%;
} */
</style>
